﻿<!DOCTYPE html>
<html class="no-js" xmlns:th="http://www.thymeleaf.org">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="description" content="meta description">

  <title>个人信息</title>
  <link rel="shortcut icon" type="image/x-icon" th:href="@{/img/timg.jpg}" media="screen"/>
  <!--== Google Fonts ==-->
  <link href="https://fonts.googleapis.com/css?family=Poppins:300,400,400i,500,600,700" rel="stylesheet">
  <link rel="stylesheet" th:href="@{/css/alert.css}">
  <!--=== Bootstrap CSS ===-->
  <link th:href="@{/assets2/css/vendor/bootstrap.min.css}" rel="stylesheet">
  <!--=== Font-Awesome CSS ===-->
  <link th:href="@{/assets2/css/vendor/font-awesome.css}" rel="stylesheet">
  <!--=== Plugins CSS ===-->
  <link th:href="@{/assets2/css/plugins.css}" rel="stylesheet">
  <!--=== Helper CSS ===-->
  <link th:href="@{/assets2/css/helper.min.css}" rel="stylesheet">
  <!--=== Main Style CSS ===-->
  <link th:href="@{/assets2/css/style.css}" rel="stylesheet">

  <link rel="stylesheet" th:href="@{/css/default.css}">

  <link rel="stylesheet" th:href="@{/css/singleShop.css}">
  <!-- Modernizer JS -->
  <script th:src="@{/assets2/js/vendor/modernizr-2.8.3.min.js}"></script>

  <!--[if lt IE 9]>
  <script src="http://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
  <script src="http://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
  <![endif]-->
  <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=Yp3YOYrfiuc9cDOxQRP9ubHvPtn4Dtn2"></script>
</head>

<body>

<div th:insert="~{shopIndex::header}"></div>

<div class="page-breadcrumb-wrap">
  <div class="container">
    <div class="row">
      <div class="col-lg-12">
        <div class="page-breadcrumb">
          <ul class="nav">
            <li><a th:href="@{/shopIndex}">主页</a></li>
            <li><a href="#" class="active">个人信息</a></li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</div>

<div id="page-content-wrapper">
  <div class="container">
    <div class="row">
      <div class="col-lg-12">
        <!-- My Account Page Start -->
        <div class="myaccount-page-wrapper">
          <!-- My Account Tab Menu Start -->
          <div class="row">
            <div class="col-lg-3">
              <div class="myaccount-tab-menu nav" role="tablist">
                <a href="#dashboad" class="active" data-toggle="tab"><i class="fa fa-dashboard"></i>我的账户</a>

                <a href="#orders" data-toggle="tab"><i class="fa fa-cart-arrow-down"></i>订单管理</a>

                <a href="#address-edit" data-toggle="tab"><i class="fa fa-map-marker"></i>地址管理</a>

                <a href="#account-info" data-toggle="tab"><i class="fa fa-user"></i>个人信息</a>

                <a th:href="@{/logout}"><i class="fa fa-sign-out"></i>退出</a>
              </div>
            </div>
            <!-- My Account Tab Menu End -->

            <!-- My Account Tab Content Start -->
            <div class="col-lg-9 mt-15 mt-lg-0">
              <div class="tab-content" id="myaccountContent">
                <!-- Single Tab Content Start -->
                <div class="tab-pane fade show active" id="dashboad" role="tabpanel">
                  <div class="myaccount-content">
                    <h3>我的账户</h3>

                    <div class="welcome">
                      <p>Hello, <strong th:text="${session.user.getuName()}"></strong></p>
                    </div>

                    <p class="mb-0">从您的帐户中。您可以方便地检查和查看您最近的订单，管理您的发货和账单地址，编辑您的密码和帐户详细信息。</p>
                  </div>
                </div>
                <!-- Single Tab Content End -->

                <!-- Single Tab Content Start -->
                <div class="tab-pane fade" id="orders" role="tabpanel">
                  <div class="myaccount-content">
                    <h3>订单管理</h3>

                    <div class="myaccount-table table-responsive text-center">
                      <table class="table table-bordered" th:fragment="order" id="order">
                        <thead class="thead-light">
                        <tr>
                          <th>订单</th>
                          <th>订单时间</th>
                          <th>商品名</th>
                          <th>价格(元)</th>
                          <th>状态</th>
                          <th>操作</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr th:each="indent:${indents}">
                          <td th:text="${indentStat.index}+1"></td>
                          <td th:text="${indent.getoTime()}"></td>
                          <td th:text="${indent.getPhone().getpName()}"></td>
                          <td th:text="${indent.getPhone().getpPrice()}"></td>
                          <div th:switch="${indent.getoStatus()}">
                            <td th:case="1">未发货</td>
                            <td th:case="2">未签收</td>
                            <td th:case="3">已签收</td>
                            <td th:case="4">已评价</td>
                          </div>
                          <div th:switch="${indent.getoStatus()}">
                            <td th:case="1"><a th:href="@{/singleShop/{id}(id=${indent.getPhone().getpId()})}" class="btn">查看</a></td>
                            <td th:case="2"><a th:href="@{/singleShop/{id}(id=${indent.getPhone().getpId()})}" class="btn">查看</a><a href="javascript:void(0);" class="btn" data-toggle="modal" data-target="#myModal" th:onclick="'javascript:sign('+${indent.getoId()}+')'">签收</a></td>
                            <td th:case="3"><a th:href="@{/singleShop/{id}(id=${indent.getPhone().getpId()})}" class="btn">查看</a><a th:href="@{/singleShop/{id}/{oid}(id=${indent.getPhone().getpId()},oid=${indent.getoId()})}" class="btn">评价</a></td>
                            <td th:case="4"><a th:href="@{/singleShop/{id}(id=${indent.getPhone().getpId()})}" class="btn">查看</a></td>
                          </div>
                         </tr>
                        </tbody>
                      </table>
                      <div class="products-settings-option d-block d-md-flex">
                        <nav class="page-pagination" style="text-align: right">
                          <ul class="pagination" id="page">
                          </ul>
                        </nav>
                      </div>
                    </div>
                  </div>
                </div>
                <!-- Single Tab Content End -->

                <!-- Single Tab Content Start -->
                <div class="tab-pane fade" id="address-edit" role="tabpanel">
                  <div class="myaccount-content">
                    <h3 style="display: inline-block;">地址管理</h3>
                    <button type="button" class="btn btn-success" style="float: right; border-radius: 10px" data-toggle="modal" data-target="#myModal2"><i class="fa fa-edit"></i>新增地址</button>
                    <div class="row">
                      <div class="col-lg-6" th:each="adress:${addresses}">
                        <address>
                          <p><strong>收件人:[[${adress.getuName()}]]</strong></p>
                          <p>手机号:[[${adress.getuPhone()}]]<br>
                            省份:[[${adress.getuAddressProvince()}]]</p>
                          <p>城市:[[${adress. getuAddressDetail()}]]</p>
                        </address>
                        <a class="btn d-inline-block" th:onclick="'javascript:update('+${adressStat.index}+')'" data-toggle="modal" data-target="#myModal4"><i class="fa fa-edit" ></i>修改</a>
                        <a class="btn d-inline-block"  th:onclick="'javascript:del('+${adress.getaId()}+')'" data-toggle="modal" data-target="#myModal3"><i class="fa fa-edit"></i>删除</a>
                      </div>
                    </div>
                  </div>
                </div>
                <!-- Single Tab Content End -->

                <!-- Single Tab Content Start -->
                <div class="tab-pane fade" id="account-info" role="tabpanel">
                  <div class="myaccount-content">
                    <h3>个人信息</h3>

                    <div class="account-details-form">
                      <form th:action="@{/account/{id}(id=${session.user.getuId()})}" method="post">
                        <input type="hidden" name="_method" value="PUT">
                        <div class="row">
                          <div class="col-lg-6">
                            <div class="single-input-item">
                              <label for="first-name" class="required">账号</label>
                              <input type="text" id="first-name" th:value="${session.user.getuAccount()}" disabled/>
                            </div>
                          </div>

                          <div class="col-lg-6">
                            <div class="single-input-item">
                              <label for="last-name" class="required">用户名</label>
                              <input type="text" id="last-name" th:value="${session.user.getuName()}" name="name"/>
                            </div>
                          </div>
                        </div>

                        <div class="single-input-item">
                          <label for="phone" class="required">手机号码</label>
                          <input type="text" id="phone" th:value="${session.user.getuPhone()}" name="phone"/>
                        </div>

                        <div class="single-input-item">
                          <label for="email" class="required">邮箱地址</label>
                          <input type="email" id="email" th:value="${session.user.getuEmail()}" name="email"/>
                        </div>

                        <div class="single-input-item">
                          <button type="submit" class="btn">更新个人信息</button>
                        </div>
                      </form>
                    </div>
                  </div>
                </div>
                <!-- Single Tab Content End -->
              </div>
            </div>
            <!-- My Account Tab Content End -->
          </div>
        </div>
        <!-- My Account Page End -->
      </div>
    </div>
  </div>
</div>

<!-- Modal -->
<div class="modal fade bs-example-modal-sm" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog modal-sm" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title" id="myModalLabel">是否签收</h4>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
      </div>
      <div class="modal-body">
        <form action="" method="post" id="signForm">
          <input type="hidden" name="_method" value="PUT">
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
        <button type="button" class="btn btn-primary" id="sign">确认</button>
      </div>
    </div>
  </div>
</div>

<div class="modal fade bs-example-modal-sm" id="myModal2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel2">
  <div class="modal-dialog modal-sm" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title" id="myModalLabel2">添加地址</h4>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
      </div>
      <div class="modal-body">
        <form th:action="@{/address}" method="post" id="addForm">
          <div class="single-input-item">
            <label for="InputProvince">省份</label>
            <input type="text" class="form-control" id="InputProvince" name="province" autocomplete="off">
          </div>
          <div class="single-input-item">
            <label for="InputCity">城市</label>
            <input type="text" class="form-control" id="InputCity" name="city" autocomplete="off">
          </div>
          <div class="single-input-item">
            <label for="InputName">收件人</label>
            <input type="text" class="form-control" id="InputName" name="name" autocomplete="off">
          </div>
          <div class="single-input-item">
            <label for="InputPhone">手机号码</label>
            <input type="text" class="form-control" id="InputPhone" name="phone" autocomplete="off">
          </div>
          <button type='button' class="btn btn-success" id="map" style="margin-top: 20px">点击获取详细地址</button>
        </form>
        <div style="display: none" id="show">
          <div id='allmap' style='width: 480px; height: 522px; position: absolute; top: -43px; left: 298px'></div>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
        <button type="button" class="btn btn-primary" id="submit">确认</button>
      </div>
    </div>
  </div>
</div>

<div class="modal fade bs-example-modal-sm" id="myModal3" tabindex="-1" role="dialog" aria-labelledby="myModalLabel3">
  <div class="modal-dialog modal-sm" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title" id="myModalLabel3">是否删除</h4>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
      </div>
      <div class="modal-body">
        <form action="" method="post" id="deleteForm">
          <input type="hidden" name="_method" value="DELETE">
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
        <button type="button" class="btn btn-primary" id="delete">确认</button>
      </div>
    </div>
  </div>
</div>

<div class="modal fade bs-example-modal-sm" id="myModal4" tabindex="-1" role="dialog" aria-labelledby="myModalLabel4">
  <div class="modal-dialog modal-sm" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title" id="myModalLabel4">添加地址</h4>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
      </div>
      <div class="modal-body">
        <form action="" method="post" id="updateForm">
          <input type="hidden" name="_method" value="PUT">
          <div class="single-input-item">
            <label for="updateProvince">省份</label>
            <input type="text" class="form-control" id="updateProvince" name="province" autocomplete="off">
          </div>
          <div class="single-input-item">
            <label for="updateCity">城市</label>
            <input type="text" class="form-control" id="updateCity" name="city" autocomplete="off">
          </div>
          <div class="single-input-item">
            <label for="updateName">收件人</label>
            <input type="text" class="form-control" id="updateName" name="name" autocomplete="off">
          </div>
          <div class="single-input-item">
            <label for="updatePhone">手机号码</label>
            <input type="text" class="form-control" id="updatePhone" name="phone" autocomplete="off">
          </div>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
        <button type="button" class="btn btn-primary" id="update">确认</button>
      </div>
    </div>
  </div>
</div>

<div th:insert="~{shopIndex::footer}"></div>

<!-- Scroll to Top Start -->
<a href="#" class="scrolltotop"><i class="fa fa-angle-up"></i></a>
<!-- Scroll to Top End -->

<!--=======================Javascript============================-->
<!--=== Jquery Min Js ===-->
<script th:src="@{/assets2/js/vendor/jquery-3.3.1.min.js}"></script>
<!--=== Jquery Migrate Min Js ===-->
<script th:src="@{/assets2/js/vendor/jquery-migrate-1.4.1.min.js}"></script>
<!--=== Popper Min Js ===-->
<script th:src="@{/assets2/js/vendor/popper.min.js}"></script>
<!--=== Bootstrap Min Js ===-->
<script th:src="@{/assets2/js/vendor/bootstrap.min.js}"></script>
<!--=== Ajax Mail Js ===-->
<script th:src="@{/assets2/js/ajax-mail.js}"></script>
<!--=== Plugins Min Js ===-->
<script th:src="@{/assets2/js/plugins.js}"></script>

<!--=== Active Js ===-->
<script th:src="@{/assets2/js/active.js}"></script>
<script th:src="@{/js/bootstrap-paginator.js}"></script>
<script th:src="@{/js/alert.js}"></script>
<script th:src="@{/js/account.js}"></script>
<script th:inline="javascript">
  var currentPage = [[${currentPage}]];	//当前页
  var totalPages = [[${totalPages}]];
  var addresses = [[${addresses}]];
  $("#page").bootstrapPaginator({
    bootstrapMajorVersion:3, 	//对应的bootstrap版本
    currentPage: currentPage, 		//当前页数
    numberOfPages: 4, 		//每次显示页数
    totalPages:totalPages, 	//总页数
    shouldShowPage:true,	//是否显示该按钮
    //点击事件
    onPageClicked: function (event, originalEvent, type, page) {
      localRefresh(page);
    }
  });
  function sign(id) {
    $("#signForm").attr("action","/order/"+id);
  }
  $("#sign").click(function () {
    $("#signForm").submit();
  })
  function localRefresh(page) {
    // 装载局部刷新返回的页面
    $('#order').load("/order?page="+page);
  }
  function del(id) {
    $("#deleteForm").attr("action","/address/"+id);
  }
  $("#delete").click(function () {
    $("#deleteForm").submit();
  })
  function update(index) {
    $("#updateProvince").val(addresses[index].uAddressProvince);
    $("#updateCity").val(addresses[index].uAddressDetail);
    $("#updateName").val(addresses[index].uName);
    $("#updatePhone").val(addresses[index].uPhone);
    $("#updateForm").attr("action","/address/"+addresses[index].aId);
  }
  $("#update").click(function () {
    $("#updateForm").submit();
  })
</script>
<script>
  $("#map").click(function () {
    if($('#show').is(':hidden')){//如果当前隐藏
      $('#show').show();//那么就显示div
    }else{//否则
      $('#show').hide();//就隐藏div
    }
    var map = new BMap.Map("allmap");
    map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放
    map.enableDragging(true); //启用地图拖拽
    var geoc = new BMap.Geocoder(); //地址解析对象
    var geolocation = new BMap.Geolocation();
    var point = new BMap.Point(116.331398,39.897445);
    map.centerAndZoom(point,12);

    geolocation.getCurrentPosition(function(r) {
      if (this.getStatus() == BMAP_STATUS_SUCCESS) {
        var mk = new BMap.Marker(r.point);
        map.addOverlay(mk);
        map.panTo(r.point);
      } else {
        alert("定位失败")
      }
    }, {
      enableHighAccuracy: true
    });
    map.addEventListener("click", showInfo);
    map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);
    function showInfo(e){
      geoc.getLocation(e.point,function (rs) {
        let addComp = rs.addressComponents;
        let address = "当前位置：" + addComp.province + ", " + addComp.city + ", " + addComp.district + ", " + addComp.street + ", " + addComp.streetNumber;
        let city =addComp.city + "" + addComp.district + "" + addComp.street + "" + addComp.streetNumber;
        if (confirm("确定要地址是" + address + "?")) {
          $("#InputProvince").val(addComp.province);
          $("#InputCity").val(city);
        }
      })
    }
  });
  $("#submit").click(function () {
    $("#addForm").submit();
  })
</script>
</body>
</html>
